<template>
  <div class="home">
    <el-row :gutter="15" class="homeBox">
      <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :lg="{ span: 8 }" :xl="{ span: 8 }" class="homeItem" v-for="item in ruleList" :key='item.id'>
        <info class="homeContent" ref="homeInfo" v-if="item.id === 1 && item.status === 'display'"></info>

        <flow class="homeContent" ref="flow" v-if="item.id === 2 && item.status === 'display'"></flow>

        <div class="homeContent barOverflowX" v-if="item.id === 3 && item.status === 'display'">
          <div class="homeInfoTitle">
            <span>{{$t('实时监控')}}</span>
          </div>
          <div style="display: flex;width:98%;" id="gaugeCpuMem">
            <gauge-cpu ref="gaugeCpu"></gauge-cpu>
            <gauge-Mem ref="gaugeMem"></gauge-Mem>
          </div>
        </div>

        <div class="homeContent barOverflowX" v-if="item.id === 4 && item.status === 'display'">
          <div class="homeInfoTitle">
            <span>{{$t('日志趋势')}}</span>
          </div>
          <trend-line ref="trendLine"></trend-line>
        </div>

        <storage class="homeContent" ref="storage" v-if="item.id === 5 && item.status === 'display'"></storage>

        <div class="homeContent barOverflowX" v-if="item.id === 6 && item.status === 'display'">
          <div class="homeInfoTitle">
            <span>{{$t('日志级别统计')}}</span>
          </div>
          <log-level ref="logLevel"></log-level>
        </div>

        <licence class="homeContent" ref="licence" v-if="item.id === 7 && item.status === 'display'"></licence>
      </el-col>
    </el-row>
    <AdminConfigDialog v-if="adminConfigDialogVisible" ref="refAdminConfigDialogVisible"></AdminConfigDialog>
  </div>

</template>

<script>
import Flow from './components/flow.vue'
import GaugeCpu from './components/gaugeCpu.vue'
import GaugeMem from './components/gaugeMem.vue'
import info from './components/info.vue'
import Licence from './components/licence.vue'
import LogLevel from './components/logLevel.vue'
import Storage from './components/storage.vue'
import TrendLine from './components/trendLine.vue'
import { getUserInfo, getOem } from '@/utils/auth'
import { getHomeMenu } from '@/api/home'
import Middle from '@/utils/middle.js'
import { Loading } from 'element-ui'
import { getFirmwareInfo } from '@/api/system/update'
import AdminConfigDialog from './AdminConfigDialog'

export default {
  components: {
    info,
    Flow,
    GaugeMem,
    GaugeCpu,
    TrendLine,
    Storage,
    LogLevel,
    Licence,
    AdminConfigDialog
  },
  name: 'Home',
  data () {
    return {
      userInfo: getUserInfo(),
      oem: getOem(),
      timer: null,
      loadingInstance: null,
      ruleList: [],
      adminConfigDialogVisible: false,
      roleList: this.$store.getters.roleList
    }
  },
  mounted () {
    var _that = this
    if (this.roleList && this.roleList.includes('/system/upgrade')) {
      const h = this.$createElement
      getFirmwareInfo().then(res => {
        if (res.status === 0 && res && res.info && res.info[0] && res.info[0].package && res.info[0].package.length > 0) {
          if (Middle.upgradeTip) {
            Middle.upgradeTip.close()
          }
          Middle.upgradeTip = Middle.$notify.info({
            title: this.$t('提示'),
            message: h('div', { class: 'message' }, [
              h('div', { class: 'btnList' }, [
                h('span', null, this.$t('你有需要升级的文件，请点击')),
                h('a', {
                  class: 'upgradeButton',
                  on: { click: _that.routerPushUpgrade }
                }, this.$t('升级')),
                h('span', null, this.$t('进入系统升级页面。'))
              ])
            ]),
            position: 'bottom-right',
            offset: 0
          })
        }
      })
    }
    Middle.$on('getInfoRefresh', function () {
      _that.getInfoRefresh()
    })
    getHomeMenu({ roleID: this.userInfo.roleID }).then(res => {
      if (res.status === 0) {
        this.ruleList = res.info
        this.ruleList.sort(this.compare('sort'))
        this.$nextTick(() => {
          this.initHome()
        })
      }
    })
    if (this.$store.state.user.passwordFlag){
      this.$store.dispatch('user/savePassword', false)
      if (_that.userInfo.password_past === true) {
        // '审计管理员', '配置管理员'
        if ([2, 4].includes(_that.userInfo.roleID)) {
          _that.$alert(this.$t('请尽快联系系统管理员进行修改密码！'), this.$t('提示'), {
            closeOnClickModal: false,
            confirmButtonText: this.$t('确定'),
            type: 'warning'
          })
        } else {
          _that.$confirm(this.$t('密码已过期，建议修改！'), this.$t('提示'), {
            closeOnClickModal: false,
            confirmButtonText: this.$t('修改'),
            cancelButtonText: this.$t('忽略'),
            confirmButtonClass: 'confirmButton',
            cancelButtonClass: 'confirmCancelButton',
            type: 'warning'
          }).then(() => {
            _that.adminConfigDialogVisible = true
            _that.$nextTick(() => {
              _that.$refs.refAdminConfigDialogVisible.init(_that.userInfo.username)
            })
          })
        }
      }
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    initHome () {
      let _that = this
      for (let item of _that.ruleList) {
        if (item.status === 'display') {
          switch (item.id) {
            // case '日志趋势':
            //   _that.$refs.trendLine[0].init(true) // 日志趋势
            //   break
            case 3:
              if (document.getElementById('gaugeCpuMem')) {
                this.loadingInstance = Loading.service({
                  target: '#gaugeCpuMem',
                  lock: true,
                  text: this.$t('加载'),
                  spinner: 'el-icon-loading',
                  background: 'rgba(255, 255, 255, 0.4)'
                })
              }
              // 实时监控cpu
              if (_that.$refs.gaugeCpu && _that.$refs.gaugeMem) {
                Promise.all([
                  _that.$refs.gaugeCpu[0].init(),
                  _that.$refs.gaugeMem[0].init()])
                  .then(res => {
                    // _that.$refs.gaugeCpu[0].init().then(res => {
                    // 实时监控内存
                    // _that.$refs.gaugeMem[0].init().then(res1 => {
                    if (this.loadingInstance) {
                      this.loadingInstance.close()
                      this.loadingInstance = null
                    }
                  })
              }
              break
            // case '日志级别统计':
            //   _that.$refs.logLevel[0].init(true) // 日志级别统计
            //   break
            // case '基本信息':
            //   _that.$refs.homeInfo[0].init(true) // 基本信息
            //   break
            // case '接口信息':
            //   _that.$refs.flow[0].init(true) // 接口信息
            //   break
            // case '存储空间':
            //   _that.$refs.storage[0].init(true) // 存储空间
            //   break
            // case '授权信息':
            //   _that.$refs.licence[0].init(true) // 授权信息
            //   break
          }
        }
      }
      //  _that.$refs.trendLine.init() // 日志趋势
      //  _that.$refs.gaugeCpu.init() // 实时监控cpu
      //  _that.$refs.gaugeMem.init() // 实时监控内存
      //  _that.$refs.logLevel.init() // 日志级别统计
      _that.timer = setInterval(function () {
        for (let item of _that.ruleList) {
          if (item.status === 'display') {
            switch (item.id) {
              // case '日志趋势':
              //   _that.$refs.trendLine[0].init() // 日志趋势
              //   break
              case 3:
                if (_that.$refs.gaugeCpu && _that.$refs.gaugeMem) {
                  _that.$refs.gaugeCpu[0].init() // 实时监控cpu
                  _that.$refs.gaugeMem[0].init() // 实时监控内存
                }
                break
              // case '日志级别统计':
              //   _that.$refs.logLevel[0].init() // 日志级别统计
              //   break
              // case '接口信息':
              //   _that.$refs.flow[0].init() // 接口信息
              //   break
              // case '存储空间':
              //   _that.$refs.storage[0].init() // 存储空间
              //   break
            }
          }
        }
      }, 30000)
    },
    getInfoRefresh () {
      getHomeMenu({ roleID: this.userInfo.roleID }).then(res => {
        if (res.status === 0) {
          this.ruleList = res.info
          this.ruleList.sort(this.compare('sort'))
        }
      })
    },
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    routerPushUpgrade () {
      this.$router.push('/system/upgrade')
    }
  }
}
</script>
<style lang="less">
.home {
  margin-top: -40px;
}

.el-row {
  // height: 200px;
  margin: 0 !important;
}

// .homeBox {
// flex-wrap: wrap;
// }
// .homeItem {
// height: 100px;
// }
.homeContent {
  height: 315px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 7.5px;
  margin-top: 7.5px;
  // margin-bottom: 20px;
}

.homeInfoTitle {
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
  color: #303133;
}

.barOverflowX {
  overflow-x: auto;
}
</style>
<style lang="scss" scoped>
.upgradeButton {
  color: #409eff;
}
</style>